<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <h4>{{msg}}</h4>
        <!-- v-bind只能实现单向绑定,从M自动绑定到V,无法实现双向绑定 -->
        <input type="text" :value="msg"><br />
        <!-- v-model可以实现表单元素和model中数据的双向绑定 -->
        <input type="text" v-model="msg">
    </div>

    <div id="app2">
        <input type="number" v-model="n1">
        <select v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="number" v-model="n2">
        <input type="button" value="=" @click="calc">
        <input type="number" v-model="result">
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "双向绑定"
        }
    });

    var vm2 = new Vue({
        el: "#app2",
        data: {
            n1: 0,
            n2: 0,
            result: 0,
            opt: "+"
        },
        methods: {
            calc() {
                this.result = eval('parseInt(this.n1)' + this.opt + 'parseInt(this.n2)')
                // switch (this.opt) {
                //     case "+":
                //         this.result = parseInt(this.n1) + parseInt(this.n2);
                //         break;
                //     case "-":
                //         this.result = parseInt(this.n1) - parseInt(this.n2);
                //         break;
                //     case "*":
                //         this.result = parseInt(this.n1) * parseInt(this.n2);
                //         break;
                //     case "/":
                //         this.result = parseInt(this.n1) / parseInt(this.n2);
                //         break;
                // }
            }
        }
    });
</script>

</html>